<template>
<div class="frame">
    <button>
    <div>
        <button @click="num--"  class="right" v-show="num>0"><img src="/public/left.png"></button>
    </div>
    </button>

    <img :src="picture[num]">
    <button>
        <div>
            <button @click="num++"  class="right" v-show="num<6"><img src="/public/right.png"></button>
        </div>
    </button>
</div>
</template>

<script setup>
    import { ref } from 'vue';
    let num=ref(4);
    let picture=["/public/01.png","/public/02.png","/public/03.png","/public/04.png","/public/05.png","/public/06.png","/public/07.png"]
</script>

<style scoped>
    .frame{
        display: flex;
        justify-content: center;
        gap: 20px;
    }
    .right{
        width: 200px;
        cursor: pointer;
        background: transparent;
        border: none;
    }
    .frame div{
        width: 200px;
    }
</style>